import React from 'react';
import {Collapse} from 'antd';

export default () => {
    const onDragStart = (event, nodeType) => {
        event.dataTransfer.setData('application/reactflow', nodeType);
        event.dataTransfer.setData('application/reactflow-nodename', event.target.innerText);
        event.dataTransfer.effectAllowed = 'move';
    };

    return (
        <Collapse defaultActiveKey={['1']}>
            <Collapse.Panel header="This is panel header 1" key="1">
                <div className="dndnode input" onDragStart={(event) => onDragStart(event, 'input')} draggable>
                    Analog Input
                </div>
                <div className="dndnode" onDragStart={(event) => onDragStart(event, 'default')} draggable>
                    Analog Value
                </div>
                <div className="dndnode output" onDragStart={(event) => onDragStart(event, 'output')} draggable>
                    Analog Output
                </div>
            </Collapse.Panel>
            <Collapse.Panel header="This is panel header 2" key="2">
                <div className="dndnode" onDragStart={(event) => onDragStart(event, 'selectorNode')} draggable>
                    Random Node
                </div>
            </Collapse.Panel>
            <Collapse.Panel header="This is panel header 3" key="3">
                <p>13</p>
            </Collapse.Panel>
        </Collapse>
    );
};